<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮播图位移滚动</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .banner {
      position: relative;
      overflow: hidden;

    }
    
    .banner .images {
      position: relative;
      display: flex;
      height: 550px;
    }

    .banner .images .item {
      position: absolute;
      left: 0;
      top: 0;
    }

    .banner .images .item img {
      width: 1920px;
      height: 550px;
    }

    .indicator {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 42px;
      display: flex;
      justify-content: center;
    }

    .indicator .item {
      width: 8px;
      height: 8px;
      margin: 0 10px;
      border-radius: 50%;
      background-color: #aaa;
      cursor: pointer;
    }

    .indicator .item.active {
      background-color: red;
    }
    
  </style>
</head>
<body>

  <div class="banner">
    <ul class="images"></ul>
    <div class="control">
      <button onclick="prev()">上一个</button>
      <button onclick="next()">下一个</button>
    </div>
    <div class="indicator"></div>
  </div>

  <script src="./json/banner_data.js"></script>
  <script>
    const bannerServerUrl = "https://res.vmallres.com/"
    const timeout = 2000
    let timerId = null
    let currentIndex = 0

    const bannerEl = document.querySelector(".banner")
    const imagesEl = document.querySelector(".images")
    const indicatorEl = document.querySelector(".indicator")

    banners.forEach((item, index) => {
      const liEl = document.createElement("li")
      liEl.classList.add("item")
      liEl.style.left = index * 100 + "%"
      const imgEl = document.createElement("img")
      imgEl.src = bannerServerUrl + item.imgUrl;

      const divEl = document.createElement("div")
      divEl.classList.add("item")
      divEl.setAttribute("index", index)

      indicatorEl.appendChild(divEl)
      liEl.appendChild(imgEl)
      imagesEl.appendChild(liEl)
    })

    imagesEl.children[0].classList.add("active")
    imagesEl.style.transition = "all .8s ease"
    indicatorEl.children[0].classList.add("active")

    // let activeEl = document.querySelector(".images .item.active")
    let indicatorActiveEl = document.querySelector(".indicator .item.active")
    
    indicatorEl.addEventListener("click", (e) => {
      currentIndex = e.target.getAttribute("index")
      switchImage()
    })

    function next() {
      currentIndex++
      switchImage()
    }

    function prev() {
      currentIndex--
      switchImage()
    }

    bannerEl.addEventListener("mouseover", () => {
      stopBanner()
    })

    bannerEl.addEventListener("mouseout", () => {
      automaticBanner()
    })
    
    function switchImage() {
      if (currentIndex === imagesEl.children.length) {
        currentIndex = 0
      }
      if (currentIndex < 0) {
        currentIndex = imagesEl.children.length - 1
      }
      
      // activeEl.classList.remove("active")
      indicatorActiveEl.classList.remove("active")

      // const newActiveEl = imagesEl.children[currentIndex]
      const newIndicatorActiveEl = indicatorEl.children[currentIndex]
      imagesEl.style.transform = `translateX(${-currentIndex * 100}%)`

      // newActiveEl.classList.add("active")
      newIndicatorActiveEl.classList.add("active")

      // activeEl = newActiveEl
      indicatorActiveEl = newIndicatorActiveEl
    }

    function automaticBanner(index) {
      timerId = setInterval(() => {
        next()
      }, timeout)
    }
    automaticBanner()

    function stopBanner() {
      clearInterval(timerId)
    }
    
  </script>
  
</body>
</html>